import React, { Fragment } from 'react'
import { View, StatusBar, StyleSheet, Image } from 'react-native'
import PropTypes from 'prop-types'
import Orientation from 'react-native-orientation-locker'
import {
  ScaleS,
  HEIGHT,
  WIDTH,
  STATUSBAR_HEIGHT,
  IS_IOS,
  IS_ANDROID
} from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import { PolyvLivePlayer, RNTPolyvLiveManager } from 'src/bridge/index'

import moment from 'moment'

export default class PolyvLiveView extends React.PureComponent {
  render() {
    const {
      polyLiveState: { paused, fullscreen, showdanmu },
      children
    } = this.props
    return (
      <PolyvLivePlayer
        style={StyleSheet.absoluteFillObject}
        ref={this.setPolyvLivePlayerRef}
        onPlayLiveEvent={this._onPlayLiveEvent}
      >
        {children}
      </PolyvLivePlayer>
    )
  }

  componentDidMount() {
    this._configOrientations()
  }

  componentWillUnmount() {
    this._freeOrientations()
    this._freePlayer()
  }

  _configOrientations = () => {
    if (IS_IOS) {
      Orientation.lockToPortrait()
      Orientation.addOrientationListener(this._onOrientationDidChange)
    }
  }

  _freeOrientations = () => {
    if (IS_IOS) {
      Orientation.lockToPortrait()
      Orientation.removeOrientationListener(this._onOrientationDidChange)
    }
  }

  _onOrientationDidChange = orientation => {
    console.log('_onOrientationDidChange', orientation)
    // LayoutAnimation.easeInEaseOut()
    if (orientation === 'LANDSCAPE-LEFT' || orientation === 'LANDSCAPE-RIGHT') {
      this.props.PolyvLiveSkinPropsChange('fullscreen', true)
    } else if (orientation === 'PORTRAIT') {
      this.props.PolyvLiveSkinPropsChange('fullscreen', false)
    }
  }

  setPolyvLiveNativeProps = (key, value) => {
    console.log('setPolyvLiveNativeProps', key, value)
    if (key === 'paused' && !value && IS_IOS) {
      console.log('unlockAllOrientations')
      Orientation.unlockAllOrientations()
      this.polyvLivePlayerRef.setNativeProps({
        canorientation: true
      })
    }
    this.polyvLivePlayerRef.setNativeProps({
      [key]: value
    })
  }

  play = () => {
    this.polyvLivePlayerRef.setPause(false)
  }

  pause = () => {
    this.polyvLivePlayerRef.setPause(true)
  }

  setPolyvLivePlayerRef = ref => (this.polyvLivePlayerRef = ref)

  setOrientationListener = enable => {
    if (IS_ANDROID) {
      if (this.polyvLivePlayerRef) {
        this.polyvLivePlayerRef.orientationListener(enable)
      }
    }
  }

  configPolyLivePlayer = ({
    polyvSetting,
    channel: { no: channelId, vidWarmVideo, startTime }
  }) => {
    if (IS_IOS) {
      RNTPolyvLiveManager.initPolyLive(
        moment(startTime).unix(),
        channelId,
        vidWarmVideo, // '0bcf19d2a6c674506b25238f1a96b53a_0',
        polyvSetting
      )
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    } else {
      console.info('initPolyLiveinitPolyLive')
      const { appId, appSecret, userId } = polyvSetting
      this.polyvLivePlayerRef.initPolyLive({
        appId,
        appSecret: appSecret,
        userId,
        channelId
      })
      this.polyvLivePlayerRef.setOrientationListener(false)
    }
  }

  _freePlayer = () => {
    if (IS_IOS) {
      RNTPolyvLiveManager.freePlayer()
    } else {
      this.polyvLivePlayerRef.freePlayer()
    }
  }

  _onPlayLiveEvent = data => {
    console.log('_onPlayLiveEvent', data.nativeEvent)
    const { key, value } = data.nativeEvent
    // if (key === 'paused' && !value) {
    //   this.unlock = true
    //   // 打开旋转屏幕
    //   console.log('Orientation.unlockAllOrientations()')
    //   Orientation.unlockAllOrientations()
    // }
    if (IS_IOS) {
      // if (key === 'fullscreen' && !this.unlock) {
      //   // 旋转屏幕前，禁止全屏
      //   return
      // }
    } else {

    }
    this.props.PolyvLiveSkinPropsChange(key, value)
  }
}

PolyvLiveView.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  children: PropTypes.node,
  company: PropTypes.object,
  channel: PropTypes.object,
  polyLiveState: PropTypes.object,
  PolyvLiveSkinPropsChange: PropTypes.func,
  goBack: PropTypes.func
}
const styles = StyleSheet.create({
  flex1: {
    flex: 1
  }
})
